<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>

  </style>
</head>

<body>

  <!-- 1.编写位置一: 编写在html内部(了解) -->
  <a href="#" onclick="alert('百度一下')">百度一下</a>
  <a href="javascript: alert('百度一下')">百度一下</a>

  <!-- 2.编写位置二: 编写在script元素之内 -->
  <a class="google" href="#">Google一下</a>
  <script>
    var googleAEl = document.querySelector(".google")
    googleAEl.onclick = function () {
      alert("Google一下")
    }
  </script>
  <!-- 3.编写位置三: 独立的js文件 -->
  <a class="bing" href="#">bing一下</a>
  <script src="./js/bing.js"></script>

  <!-- noscript -->
  <!-- 不支持JS代码 -->
  <noscript>
    <h1>您的浏览器不支持JavaScript, 请打开或者更换浏览器~</h1>
  </noscript>

  <script>
    alert("您的浏览器正在运行JavaScript代码")
  </script>

  <!-- 注意事项 -->
  <a class="bing" href="#">bing一下</a>
  <!-- script不允许写成单标签形式 -->
  <!-- 外部引用JS和内部代码不允许同时存在 -->
  <script src="./js/bing.js"></script>


  <!-- 文档加载顺序 -->
  <!-- 作为HTML文档内容的一部分，JavaScript默认遵循HTML文档的加载顺序，即自上而下的加载顺序； -->
  <!-- 推荐将JavaScript代码和编写位置放在body子元素的最后一行； -->
  <!-- 放在元素之前可能会获取不到对应的元素 -->
  <!-- HTML元素和CSS属性不区分大小写，但是在JavaScript中严格区分大小写； -->

  <h1 class="title">我是标题</h1>
  <p>我是段落, 哈哈哈哈</p>

  <!-- 普通的元素 -->
  <script>
    var titleEl = document.querySelector(".title")
    alert(titleEl)
  </script>

  <!-- js和浏览器交互方式 -->
  <script>
    // 1.交互方式一: alert函数
    alert("Hello World");

    // 2.交互方式二: console.log函数, 将内容输出到控制台中(console)
    // 使用最多的交互方式
    console.log("Hello 张三");

    // 编写的JavaScript代码出错了
    // message.length

    // 3.交互方式三: document.write()
    document.write("Hello Kobe");

    // 4.交互方式四: prompt函数, 作用获取用户输入的内容
    var result = prompt("请输入你的名字: ");
    alert("您刚才输入的内容是:" + result);
  </script>

  <!-- 注释 -->
  <script>
    // 1.单行注释

    // 2.多行注释
    /* 
     我是一行注释
     我是另外一行注释
    */

    // 3.文档注释
    /**
     * 和某人打招呼
     * @param {string} name 姓名
     * @param {number} age 年龄
     */
    function sayHello(name, age) {

    }
    // 书写文档说明之后调用函数会有对应的提示
    // 一般在编写工具函数时使用
    sayHello()
  </script>

  <!-- console快速编写 -->
  <script>
    // VScode插件和配置
    // 1.console的快速编写
    // ES7+ React/Redux/React-Native snippets

    // console.log("Hello World")

    // 推荐方式一: log -> enter
    console.log("Hello World");

    // 推荐方式二: react插件 -> clg -> enter
    console.log("Hello World")

    // 查询匹配的大括号
    // 配置
    // "editor.bracketPairColorization.enabled": true,
    // "editor.guides.bracketPairs":"active"


    // 函数
    function sayHello() {
      console.log('hhh')

    }

  </script>


  </script>



</body>

</html>